<script setup>
import { Main, DesignConfiguration } from '@/components';
import { mockCustomConfig, mockChangeCustomConfig } from './mockData';
import Utils from '@/utils';
import setAttributes from '@/utils/handlePlatform/setAttributes';

const { ref, reactive, onMounted } = Vue3;

const main = ref();
const mainKey = ref('');
let customConfig = reactive(mockCustomConfig);

const changeCustomConfig = config => {
  customConfig = config;
  mainKey.value = Utils.generateUUID();
  setAttributes(main.value, { customConfig: config });
  mockChangeCustomConfig(config);
};

onMounted(() => {
  setAttributes(main.value, { customConfig });
});
</script>

<template>
  <div id="development">
    <div class="main" ref="main" :key="mainKey">
      <Main :customConfig="customConfig" :changeCustomConfig="changeCustomConfig" />
    </div>
    <div id="configuration">
      <DesignConfiguration :customConfig="customConfig" :changeCustomConfig="changeCustomConfig" />
    </div>
  </div>
</template>

<style lang="less">
#app {
  width: 100%;
  height: 100%;
  #development {
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;

    .main {
      width: calc(100% - 300px);
      height: 100%;
      box-sizing: border-box;
    }

    #configuration {
      padding: 20px 10px 0 10px;
      height: 100%;
      background-color: #f0f2f5;
      width: 300px;
      box-sizing: border-box;

      .optionsSubmit {
        background: #0454f2;
        border-color: #0454f2;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
        margin-left: 20px;
      }
    }
  }
}
</style>
